<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>群聊设置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    /*群聊设置样式*/
    .allgroupSetupstyle .leftinfo{
      width: 242px;
      height: 100%;
      position:absolute;
      border-right: 1px solid #eee;
    }
    .allgroupSetupstyle .leftinfo .img-upload{
      width: 130px;
      height: 130px;
      cursor: pointer;
      border-radius: 80px;
      margin: 36px auto;
    }
    .allgroupSetupstyle .leftinfo .group-name{
      font-size: 24px;
      text-align: center;
      width: 100%;
      display: block;
      color: #000;
    }
    .allgroupSetupstyle .leftinfo .sendGroupmessage{
      position: absolute;
      bottom: 22px;
      left: 80px;
    }
    .allgroupSetupstyle .rightinfo{
      width: 476px;
      height: 100%;
      position:absolute;
      right: 0;
    }
  </style>
</head>
<body>
<!--群聊设置-->
  <div class="allgroupSetupstyle layui-form" lay-filter="groupinfomodify" style="position: relative;height: 420px">
    <div class="leftinfo">
      <div style="padding:0 20px">
        <div class="img-upload" id="img-upload">
          <img src="" alt="" class="imgPath" style="width: 100%;height: 100%;border-radius: 80px">
          <input type="hidden" value="" name="avatar" id="pictureUrl">
        </div>
        <span class="group-name"></span>
      </div>
      <button class="layui-btn layui-btn-norma sendGroupmessage" type="button">发送消息</button>
    </div>
    <div class="rightinfo">
      <div class="layui-form-item" style="margin-bottom: 0;margin-top: 10px">
        <label class="layui-form-label" style="padding: 5px 15px">群名称<span style="color: red">*</span></label>
        <div class="layui-input-block" style="min-height: 30px">
          <div style="height: 30px;line-height: 30px">
            <span class="groupNameshow"></span>
            <i class="layui-icon layui-icon-edit" style="margin-left: 10px;cursor: pointer" ccpim-event="groupNameshow"></i>
          </div>
          <input type="text" name="roomName" lay-verify="required" maxlength="20" class="layui-input groupNameisshow" style="height: 30px;width: 60%;display: none">
        </div>
      </div>
      <div class="layui-form-item" style="margin-bottom: 0;margin-top: 10px">
        <label class="layui-form-label" style="padding: 5px 15px">群主名称</label>
        <div class="layui-input-block" style="min-height: 30px">
          <input type="text" name="owner" disabled="true" class="layui-input" style="height: 30px;width: 80%;padding-left: 0;border: none">
        </div>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <div class="layui-input-inline">
        <input type="text" id="isgroup">
        <input type="button" lay-submit lay-filter="groupinfosubmit" id="groupinfosubmit" value="确认" class="layui-btn">
      </div>
    </div>
  </div>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script>
  layui.use(['jquery','layer','upload','form','layim'], function(){
    var $=layui.jquery,layer=layui.layer,form=layui.form,upload=layui.upload,layim=layui.layim;
    var groupid='${roomId}';

      ajaxgroupinfo();
      function ajaxgroupinfo() {//群聊信息
        $.ajax({
          url: serverPath.imPath+ '/im/imRoom/get',
          type: "get",
          contentType: 'application/json',
          dataType: 'json',
          data: {roomId:groupid},
          success: function (data) {
            var datas=data.data;
            form.val('groupinfomodify', {
              "roomName": datas.roomName
              ,'avatar':datas.avatar
              ,'owner':datas.owner
            });
            $('.allgroupSetupstyle .imgPath').attr("src",datas.avatar);
            $('.allgroupSetupstyle .group-name').html(datas.roomName);
            $('.allgroupSetupstyle .groupNameshow').html(datas.roomName);

            $('.allgroupSetupstyle .sendGroupmessage').click(function () {
              parent.layui.layim.chat({
                name: datas.roomName
                ,type: 'group'
                ,avatar: datas.avatar
                ,id: datas.id
              });
              return false;
            });
          }
        })
      };

    //图片上传
    var uploadInst = upload.render({
      elem: '#img-upload' //绑定元素
      ,url: serverPath.systemPath + '/system/attachFile/fileUpload' //上传接口
      ,accept: 'images' //允许上传的文件类型
      ,size: 51200
      ,exts:'jpg|png|jpeg'
      ,done: function(ret){
        //上传完毕回调
        if(ret.code === 0){
          if(ret.data){
            var fileOne = ret.data.fileList[0];
            var fileId = fileOne.fileId;
            var path = serverPath.systemPath + '/system/attachFile/getFileById?fileId='+fileId;
            $('.allgroupSetupstyle .imgPath').attr("src",path);
            $('#pictureUrl').val(path);
          }
        }else{
          layer.alert(ret.msg);
        }
      }
    });

    form.on('submit(groupinfosubmit)', function(data){
      data.field.id=groupid;
      $.ajax({
        url: serverPath.imPath+ '/im/imRoom/updateRoomInfo',
        type: "POST",
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(data.field),
        success: function (data) {
          if(data.code==0){
              parent.layer.close(parent.layer.getFrameIndex(window.name));
          }else if(data.code=='2'){
            $('#isgroup').val('1');
            parent.layer.alert(data.msg,function (index) {
              parent.layer.close(index);
              parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
          }else{
            parent.layer.alert(data.msg,function (index) {
              parent.layer.close(index);
            });
          }
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    var events={
            //群组设置  群名称修改显示隐藏
            groupNameshow:function () {
              $(this).parent().hide();
              $(this).parent().next().show()
             }
        };

    //群组设置  群名称修改显示隐藏
    $('.rightinfo .groupNameisshow').blur(function () {
      $('.rightinfo .groupNameshow').html($(this).val());
      $(this).hide();
      $('.rightinfo .groupNameshow').parent().show();
    });

    $('body').on('click', '*[ccpim-event]', function(e){
      var othis = $(this), methid = othis.attr('ccpim-event');
      events[methid] ? events[methid].call(this, othis, e) : '';
    });
  })
</script>
</body>
</html>
